<template>
  <el-container>
    <el-header>
      <el-row class="visitandpiont">
        <el-col>
          <h1 class="carout">车辆进出管理</h1>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div class="today" v-show="tab === 1">
        <el-row class="underpiontment">
          <el-col class="way">
            <h6>状态</h6>
          </el-col>
          <el-col class="drawway">
            <el-select v-model="formInline.region">
              <el-option label="出" value="1"></el-option>
              <el-option label="入" value="0"></el-option>
            </el-select>
          </el-col>
          <el-col class="pointime">
            <h6>时间</h6>
          </el-col>
          <el-col class="redrawwayblock">
            <div class="block">
              <el-date-picker
                v-model="value1"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col class="input">
            <el-input v-model="formInline.user" placeholder="输入关键字"></el-input>
          </el-col>
          <el-col class="find">
            <el-button type="primary" @click="findBy">查询</el-button>
          </el-col>
        </el-row>

        <el-row class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="编号">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="licensePlateNumber" label="车牌号"></el-table-column>
            <el-table-column prop="state" label="出/入状态"></el-table-column>
            <el-table-column prop="position" label="位置"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
          </el-table>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      value: "", //日期选择
      value1: ["", ""],
      tableData: [
        {
          id: "1",
          licensePlateNumber: "桂A1234",
          position: "正门",
          date: "2016-05-02",
          state: 1,
          time: 1598238850000,
        },
      ],
      tab: 1,
    };
  },
  computed: {
    scId() {
      return this.$store.state.scId;
    },
  },
  methods: {
    getdate(date) {
      let now = date,
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        y +
        "-" +
        (m < 10 ? "0" + m : m) +
        "-" +
        (d < 10 ? "0" + d : d) +
        " " +
        now.toTimeString().substr(0, 8)
      );
    },
    async getCarVisitInfoFindAll() {
      await this.$axios({
        methods: "get",
        url: `/api/${this.scId}/CarVisitInfo/findAll`,
      })
        .then((res) => {
          let data = res.data.data;
          this.tableData = data;
          for (let i = 0; i < this.tableData.length; i++) {
            //根据后端传来的状态进行筛选展示
            if (data[i].state == 1) {
              this.tableData[i].state = "出";
            } else {
              this.tableData[i].state = "入";
            }
            this.tableData[i].time = this.getdate(new Date(data[i].time));
          }
          console.log(data);
        })
        .catch((err) => {
          this.$message.error("请求失败");
          console.log(err);
        });
    },

    async findBy() {
      if (this.value1 == null) {
        console.log("null");
      } else {
        this.$axios({
          url: `/api/${this.scId}/CarVisitInfo/findByLicenseAndDate`,
          method: "post",
          data: {
            licensePlateNumber: this.formInline.user,
            state: this.formInline.region,
            start: this.value1[0],
            end: this.value1[1],
          },
        }).then((res) => {
          let data = res.data.data;
          this.tableData = data;
          for (let i = 0; i < this.tableData.length; i++) {
            //根据后端传来的状态进行筛选展示
            if (data[i].state == 1) {
              this.tableData[i].state = "出";
            } else {
              this.tableData[i].state = "入";
            }
            this.tableData[i].time = this.getdate(new Date(data[i].time));
          }
        });
      }

      // this.$axios({
      //   url: "/api/1/CarVisitInfo/findByLicenseAndDate",
      //   method: "post",
      //   data: {
      //     licensePlateNumber: this.formInline.user,
      //   },
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      // }).then((res) => {
      //   console.log(res)
      // })
    },
    onSubmit() {
      console.log("submit!");
    },
  },
  components: {},
  mounted() {
    this.getCarVisitInfoFindAll();
  },
  watch: {
    scId: {
      handler() {
        this.getCarVisitInfoFindAll();
      },
      immediate: true,
      deep: true,
    },
  },
  create() {},
};
</script>

<style scoped>
.el-header {
  background-color: white;
  width: 1000px;
  margin: 0px 20px;
  padding: 0;
}
.visitandpiont {
  display: flex;
  margin-left: 0%;
}
.piontment {
  width: 350px;
  height: 69px;
  padding: 20px;
  border: solid 1px;
}
.underpiontment {
  width: 1400px;
  height: 60px;
  margin: 20px 0px;
  display: flex;
}
.way {
  width: 100px;

  margin-left: -30px;
}
.drawway {
  width: 300px;
  padding: 10px 15px;
  margin-left: -30px;
}
.redrawway {
  width: 300px;
  margin: 0px 10px;
  padding: 10px 0px;
}
.state {
  width: 100px;

  padding: 20px 0px;
}
.input {
  width: 300px;
  padding: 10px 0px;
  margin-left: 160px;
}
.find {
  width: 70px;
  height: 70px;
  margin: 0px 60px;
  padding: 10px 0px;
}
.carout {
  height: 63px;
  width: 292px;
  padding: 20px;
  margin-left: 10px;
  display: flex;
}

.pointime {
  width: 300px;

  margin-left: -100px;
}
.drawwayblock {
  width: 280px;
  margin: 0px 30px;
  padding: 10px 15px;
}
.piontmenttime {
  width: 90px;
  padding: 20px 0px;
}
.redrawwayblock {
  width: 280px;
  margin-left: -100px;
  padding: 10px 15px;
}

.el-main {
  background-color: white;
  text-align: center;
  margin: 0px 20px;
}
</style>
